<script lang="ts" setup>
import { ref } from 'vue'
import { Search, FullScreen, Bell } from '@element-plus/icons-vue'
import Avatar from '@/components/Avatar.vue'
import { ElIcon } from 'element-plus';
import { Setting } from '@element-plus/icons-vue'
import Appearance from '@/components/Appearance.vue'

const input2 = ref('')
const drawer = ref(false)
</script>

<template>
    <div flex flex-justify-between flex-items-center h-full box-border>
        <div flex flex-justify-center flex-items-center gap-col-4>
            <!-- <Breadcrumb></Breadcrumb> -->
        </div>
        <div flex flex-justify-center flex-items-center style="height: 100%;">
            <ElInput v-model="input2" style="width: 200px" placeholder="Please Input" :prefix-icon="Search"
                size="small" />
            <Locale />

            <ElButton style="height: 100%;border: none;margin: 0;">
                <ElIcon :size="16">
                    <FullScreen />
                </ElIcon>
            </ElButton>

            <el-popover :width="300" trigger="click">
                <template #reference>
                    <ElButton style="height: 100%;border: none;margin: 0;">
                        <ElBadge :value="12">
                            <ElIcon :size="16">
                                <Bell />
                            </ElIcon>
                        </ElBadge>
                    </ElButton>
                </template>
                <el-tabs type="border-card">
                    <el-tab-pane label="通知">通知</el-tab-pane>
                    <el-tab-pane label="消息">消息</el-tab-pane>
                    <el-tab-pane label="代办">代办</el-tab-pane>
                </el-tabs>
            </el-popover>


            <ElButton style="height: 100%;border: none;margin: 0;">
                <ElIcon :size="16">
                    <Setting @click="drawer = true" />
                </ElIcon>
            </ElButton>

            <Avatar />
        </div>

        <el-drawer v-model="drawer" title="外观配置">
            <Appearance />
        </el-drawer>
    </div>
</template>

<style scoped></style>